<template>
	<view>
		<view class="Box">
			<view class="imgItem" v-for="(v, i) in imgArr" :key="i">
				<image @click="showImg(i)" :src="v" mode="widthFix" />
				<view class="remove" @click="remove(i)">x</view>
			</view>
			<view class="imgItem" @click="chooseImg" v-if="max != imgArr.length">
				<image src="../../static/image/add.png" mode="widthFix" class="add"></image>
				<view class="zi">
					添加图片
				</view>
			</view>
			<!-- <view class="images">
        <view class="baseBox" v-for="(v,i) in imgs" :key="i">
          <image @click="showImg(i)" :src="v"></image>
          <view class="remove" @click="remove(i)">x</view>
        </view>
        <view class="baseBox" @click="chooseImg">
          <image src="https://fangguaner.wm76.mtnet.ren/static/applet/+.png"></image>
        </view>
      </view> -->
		</view>
	</view>
</template>

<script>
	// var { upUrl } = require("../../api/request");
	export default {
		props: {
			imgArr: {
				type: Array,
				default: [],
			},
			max: {
				type: Number,
				default: 10
			}
		},
		data() {
			return {
				upUrl: "https://logistics-api.sczhiyun.net/lucky/File/userUploadImage",
			};
		},
		methods: {
			//图片
			chooseImg() {
				if (this.imgArr.length == this.max) {
					return uni.showToast({
						title: "最多上传六张图片",
						duration: 2000,
					});
				}
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						});
						uni.uploadFile({
							count: 1,
							url: this.upUrl, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: "image",
							// size:"1000",
							formData: {
								user: "test",
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								if (!JSON.parse(uploadFileRes.data).data.url) {
									return
								}
								console.log(JSON.parse(uploadFileRes.data).data.url);
								this.$emit("successImg", JSON.parse(uploadFileRes.data).data.url);
							},
						});
					},
				});
			},
			//删除
			remove(i) {
				this.$emit('remove', i)
			},
			//看图
			showImg(i) {
				uni.previewImage({
					current: i,
					urls: this.imgArr,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片"],
						itemColor: "#ff6600",
						success: (data) => {
							console.log(data);
							console.log(
								"选中了第" +
								(data.tapIndex + 1) +
								"个按钮,第" +
								(data.index + 1) +
								"张图片"
							);
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
					fail: (err) => {
						console.log(err);
					},
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.Box {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.imgItem {
		width: 186rpx;
		height: 186rpx;
		background-color: #fafafa;
		border: solid 2rpx #e5e5e5;
		margin: 18rpx;
		position: relative;
		overflow: hidden;

		.add {
			width: 32rpx;
			height: 31rpx;
			margin: 36rpx 76rpx;
		}

		.zi {
			font-family: SourceHanSansCN-Regular;
			font-size: 28rpx;
			color: #bbbbbb;
			text-align: center;
		}

		.remove {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			background-color: rgba(128, 128, 128, 0.5);
			color: #fff;
			right: 0rpx;
			top: 0rpx;
			font-size: 24rpx;
			border-radius: 50%;
		}
	}

	.imgItem image {
		width: 100%;
	}
</style>
